import React, { useState } from 'react'
import { Input } from 'antd'

interface TodoInputProps {
  placeholder?: string;
  handleInput: (value:string) => void;
  style?: any;
}

const TodoInput:React.FC<TodoInputProps> = (props) => {
  const {placeholder='',handleInput,style={}} = props;
  const [value,setValue] = useState('');
  const onEnter = () => {
    handleInput(value);
  }
  return (
    <div className="input-wrap">
        <Input
            className="input input-wrap"
            onPressEnter={onEnter}
            value={value}
            placeholder={placeholder}
            onChange={e => setValue(e.target.value)}
            style={style}
            allowClear
        />
    </div>
  )
}

export default TodoInput